import { ElMessageBox, ElNotification } from 'element-plus'
import { SvgFailIcon, SvgTipIcon, SvgSuccessIcon } from '@vben/icons'
import { h, defineComponent } from 'vue'
import { $t } from '@vben/locales';
// 创建自定义图标组件，确保样式生效
// 支持动态切换SvgFailIcon和SvgSuccessIcon
const CustomIcon = defineComponent({
  props: {
    size: {
      type: String,
      default: '48px'
    },
    iconType: {
      type: String,
      default: 'fail' // 可选: 'fail' | 'success'
    }
  },
  setup(props) {
    // 动态选择图标组件
    const iconMap: Record<string, any> = {
      fail: SvgFailIcon,
      success: SvgSuccessIcon
    }
    return () => {
      const IconComponent = iconMap[props.iconType] || SvgFailIcon
      return h(IconComponent, {
        style: {
          width: props.size,
          height: props.size,
          fontSize: props.size,
          // 使用 !important 确保样式优先级
          'min-width': `${props.size} !important`,
          'min-height': `${props.size} !important`,
          'max-width': `${props.size} !important`,
          'max-height': `${props.size} !important`,
          display: 'inline-block',
          verticalAlign: 'middle',
          // 移除 fill 属性，让图标使用自己的默认颜色
          // fill: 'currentColor',
          backgroundColor: 'transparent',
        },
      })
    }
  }
})

export const useMessageBox = (args: any = {}) => {

  const confirm = async (message: string | any, params?: any, iconName: string = 'fail') => {
    return ElMessageBox.alert(message, '',
      {
        icon: h(CustomIcon, { size: '48px', iconType: iconName }),
        showCancelButton: true,
        showConfirmButton: true,
        confirmButtonText: $t('common.confirmBtnTxt'),
        cancelButtonText: $t('common.cancelTxt'),
        dangerouslyUseHTMLString: true,
        customClass: "hooks-custom-message-alert-box",
        ...args,
        ...params
      })
  };

  const notification = async (message: string, params?: any) => {
    return ElNotification({
      message,
      duration: 6000,
      icon: h(CustomIcon, { size: '32px' }),
      ...args,
      ...params,
    })
  }



  return {
    confirm,
    notification
  }
};



